<template>
  <div class="flex justify-between text-[#e54c5f] mb-5">
    <div class="flex items-center cursor-pointer" @click="handleClick">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <!-- 客户管理 新增客户-->
      <span class="pl-5">{{ $t("查看客户信息") }}</span>
    </div>
    <div>
      <!-- 审核通过 审核拒绝 -->
      <el-button
        type="success"
        :icon="Check"
        v-btn="['all', 'web_customer_audit']"
        v-if="kycDetails.mer_review_status === 3"
        @click="handleAudit(1)"
      >
        {{ $t("审核通过") }}
      </el-button>

      <el-button
        type="primary"
        :icon="Warning"
        v-btn="['all', 'web_customer_audit']"
        v-if="kycDetails.mer_review_status === 3"
        @click="handleAudit(2)"
      >
        {{ $t("审核拒绝") }}
      </el-button>
    </div>
  </div>
  <el-tabs
    type="border-card"
    v-model="activeNameC"
    v-if="kycDetails.account_type == 1"
  >
    <el-tab-pane :label="$t('企业账户')" name="1">
      <el-skeleton :rows="8" animated :loading="loading">
        <el-form label-width="180px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('企业名称')" class="mb-2">
                <span>{{ kycDetails.company_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('银行名称')" class="mb-2">
                <span>{{ kycDetails.bank_name }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('付款方式')" class="mb-2">
                <span>{{ kycDetails.pay_way }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('银行国家/地区')" class="mb-2">
                <span>{{ kycDetails.bank_country }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="$t('收款人国家/地区')"
                prop="receive_country"
                class="mb-2"
              >
                <span>{{ kycDetails.receive_country }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('银行城市')">
                <span>{{ kycDetails.bank_city }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('收款人地址')">
                <span>{{ kycDetails.receive_address }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('银行地址')">
                <span>{{ kycDetails.bank_address }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('银行账号')">
                <span>{{ kycDetails.bank_card_number }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('币种')">
                <span>{{ kycDetails.currency }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('IBAN码')">
                <span>{{ kycDetails.bank_iban }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('SWIFT码')">
                <span>{{ kycDetails.bank_swift }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 真实姓名 -->
              <el-form-item :label="$t('真实姓名')">
                <span>{{ kycDetails.real_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('联系方式')">
                <span>{{ kycDetails.contact }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label="$t('个人证件照')">
            <el-image
              style="width: 192px; height: 112px"
              class="mx-5"
              v-if="kycDetails.file_data?.idcard_front"
              :src="kycDetails.file_host + kycDetails.file_data?.idcard_front"
              :preview-src-list="[
                kycDetails.file_host + kycDetails.file_data?.idcard_front,
              ]"
              fit="cover"
            />
            <el-image
              style="width: 192px; height: 112px"
              class="mx-5"
              v-if="kycDetails.file_data?.idcard_back"
              :src="kycDetails.file_host + kycDetails.file_data?.idcard_back"
              :preview-src-list="[
                kycDetails.file_host + kycDetails.file_data?.idcard_back,
              ]"
              fit="cover"
            />
            <el-image
              style="width: 192px; height: 112px"
              class="mx-5"
              v-if="kycDetails.file_data?.idcard_hand"
              :src="kycDetails.file_host + kycDetails.file_data?.idcard_hand"
              :preview-src-list="[
                kycDetails.file_host + kycDetails.file_data?.idcard_hand,
              ]"
              fit="cover"
            />
          </el-form-item>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 公司注册证书部分 -->
              <el-form-item :label="$t('公司注册证书')" label-width="250px">
                <el-link type="success">{{
                  kycDetails.file_company_certificate
                }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('公司地址证明(近3个月)')"
                label-width="350px"
              >
                <el-link type="success">{{
                  kycDetails.file_company_address
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="$t('银行对账单(近3个月)')"
                label-width="250px"
              >
                <el-link type="success">{{
                  kycDetails.file_latest_register
                }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('最新商业登记证')" label-width="350px">
                <el-link type="success">{{
                  kycDetails.file_bank_statement
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('最新年审报告')" label-width="250px">
                <el-link type="success">{{
                  kycDetails.file_latest_report
                }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('采购供应商协议及发票（有效期内）')"
                label-width="350px"
              >
                <el-link type="success">{{
                  kycDetails.file_supplier_agreement
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="$t('最新财务报表/税表')"
                label-width="250px"
              >
                <el-link type="success">{{
                  kycDetails.file_financial_statements
                }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('销售协议及发票(有效期内)')"
                label-width="350px"
              >
                <el-link type="success">{{
                  kycDetails.file_sale_agreement
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="$t('所有持股10%以上股东的有效证件')"
                label-width="250px"
              >
                <el-link type="success">{{
                  kycDetails.file_stock_certificate
                }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('开户授权签字人有效证件+签字印鉴')"
                label-width="350px"
              >
                <el-link type="success">{{
                  kycDetails.file_kaihu_zhengjian
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('INVOICE范本')" label-width="250px">
                <el-link type="success">{{ kycDetails.file_invoice }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('开户授权签字人个人地址证明（近3个月）')"
                label-width="350px"
              >
                <el-link type="success">{{
                  kycDetails.file_kaihu_zhengjian_addr
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="$t('董事地址证明(近3个月)')"
                label-width="250px"
              >
                <el-link type="success">{{
                  kycDetails.file_board_member_address
                }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('公司组织架构')" label-width="350px">
                <el-link type="success">{{
                  kycDetails.file_company_organization
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-skeleton>
    </el-tab-pane>
  </el-tabs>
  <el-tabs
    type="border-card"
    v-model="activeNameP"
    v-if="kycDetails.account_type == 2"
  >
    <!-- 个人用户 -->
    <el-tab-pane :label="$t('个人账户')" name="2">
      <el-skeleton :rows="8" animated :loading="loading">
        <el-form label-width="100px">
          <el-form-item :label="$t('真实姓名')">
            <span>{{ kycDetails.real_name }}</span>
          </el-form-item>
          <el-form-item :label="$t('联系方式')">
            <span>{{ kycDetails.contact }}</span>
          </el-form-item>
          <el-form-item :label="$t('个人证件照')">
            <el-image
              style="width: 192px; height: 112px"
              class="mx-5"
              v-if="kycDetails.file_data?.idcard_front"
              :src="kycDetails.file_host + kycDetails.file_data?.idcard_front"
              :preview-src-list="[
                kycDetails.file_host + kycDetails.file_data?.idcard_front,
              ]"
              fit="cover"
            />
            <el-image
              style="width: 192px; height: 112px"
              class="mx-5"
              v-if="kycDetails.file_data?.idcard_back"
              :src="kycDetails.file_host + kycDetails.file_data?.idcard_back"
              :preview-src-list="[
                kycDetails.file_host + kycDetails.file_data?.idcard_back,
              ]"
              fit="cover"
            />
            <el-image
              style="width: 192px; height: 112px"
              class="mx-5"
              v-if="kycDetails.file_data?.idcard_hand"
              :src="kycDetails.file_host + kycDetails.file_data?.idcard_hand"
              :preview-src-list="[
                kycDetails.file_host + kycDetails.file_data?.idcard_hand,
              ]"
              fit="cover"
            />
          </el-form-item>
        </el-form>
      </el-skeleton>
    </el-tab-pane>
  </el-tabs>
  <Dialog
    @closeDialog="handelGoogleCloseDialog"
    :dialogVisible="dialog"
    @callApi="handleGoogleApi"
  />
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { kycInfoApi, kycAuditApi } from "@/api/account/index";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Warning, Close, Check } from "@element-plus/icons-vue";
import Dialog from "@/views/settings/components/DialogForm.vue";
import { useMerchantStore } from "@/store/modules/merchant";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dialog = ref(false);
const merchantStore = useMerchantStore();
const router = useRouter();
const loading = ref(false);
const { ...route } = useRoute();
const activeNameC = ref("1");
const activeNameP = ref("2");
const kycDetails = reactive({});
const currencyList = ref([]); // 币种
const status = ref();
onMounted(() => {
  if (route.query.kycId) {
    getCustomerManagementDetail(route.query.kycId);
  }
});

const getCustomerManagementDetail = async (kycId) => {
  try {
    loading.value = true;
    const res = await kycInfoApi({ id: kycId });
    Object.assign(kycDetails, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
// 谷歌验证码
const handelGoogleCloseDialog = () => {
  dialog.value = false;
  status.value = null;
};
//
const handleGoogleApi = async (code) => {
  try {
    const res = await kycAuditApi({
      id: route.query.kycId,
      status: status.value,
      google_code: code,
    });
    if (status.value == 1) {
      ElMessage.success(t("审核通过"));
    } else {
      ElMessage.success(t("拒绝审核"));
    }
    router.replace(`/account/customer`);
  } catch (error) {
    return false;
  }
};

// 审核
const handleAudit = async (param) => {
  try {
    status.value = param;
    if (merchantStore.merchantInfo.kyc_manage > 0) {
      dialog.value = true;
      return false;
    }
    const res = await kycAuditApi({ id: kycDetails.id, status: param });
    if (param == 1) {
      ElMessage.success(t("审核通过"));
    } else {
      ElMessage.success(t("拒绝审核"));
    }
    router.replace(`/account/customer`);
  } catch (error) {
    return false;
  }
};
// 路由导航函数
const handleClick = () => {
  router.replace(`/account/customer`);
};
</script>
<style>
.el-form-item {
  margin-bottom: 0;
}
</style>
